<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!-- 若您需要使用Kendo UI Professional，请联系版权人获得合法的授权或许可。 -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bk-icon-2.0/iconfont.css" rel="stylesheet">
    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css-pro/components/form.css" rel="stylesheet">
    <!--蓝鲸提供的公用样式库 -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css-pro/bk.css" rel="stylesheet">
    <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/bk/js/bk.js"></script>
    <!-- 数据埋点统计 -->
    <script src="http://magicbox.bk.tencent.com/static_api/analysis.js"></script>
    <!--时间日期选择文件依赖-->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/daterangepicker-2.0.5/daterangepicker.css" rel="stylesheet">
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/daterangepicker-2.0.5/moment.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/daterangepicker-2.0.5/daterangepicker.js"></script>
    <!--图标依赖文件-->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/fontawesome/css/font-awesome.css" rel="stylesheet">
</head>

<body>
    <!--HTML-->
    <img alt="loadding" src="https://magicbox.bk.tencent.com/static_api/v3/components/loading2/gif/gears_36.gif">
    <form class="bk-form" style="width:600px;" id="validate_form" name="validate_form0">
        <div class="bk-form-item">
            <label class="bk-label" style="width:150px;">计划名称</label>
            <div class="bk-form-content" style="margin-left:150px;">
                <input type="text" class="bk-form-input" id="plan_name" name="plan_name" placeholder="请输入计划名称">
            </div>
        </div>
        <div class="bk-form-item">
            <label class="bk-label" style="width:150px;">计划类型</label>
            <div class="bk-form-content" style="margin-left:150px;">
                <select name="plan_grade" id="plan_grade" class="bk-form-select">
                    <option value="1">单次计划</option>
                    <option value="2">日计划</option>
                    <option value="3">周计划</option>
                    <option value="4">月计划</option>
                </select>
            </div>
        </div>    
        <div class="bk-form-item">
            <label class="bk-label" style="width:150px;">计划星级</label>
            <div class="bk-form-content" style="margin-left:150px;">
                <select name="plan_type" id="plan_type" class="bk-form-select">
                    <option value="1">一星计划</option>
                    <option value="2">二星计划</option>
                    <option value="3">三星计划</option>
                    <option value="4">四星计划</option>
                </select>
            </div>
        </div>

        <div class="bk-form-item">
            <label class="bk-label" style="width:150px;">开始时间</label>
            <input type="text" class="form-control daterangepicker_demo" id="plan_start" name="plan_start" style="margin-left:150px;width: 450px;" 
                placeholder="选择日期...">
        </div>

        <div class="bk-form-item">
            <label class="bk-label" style="width:150px;">结束时间</label>
            <input type="text" class="form-control daterangepicker_demo" id="plan_end" name="plan_end" style="margin-left:150px;width: 450px;" 
                placeholder="选择日期...">
        </div>

            <div class="bk-form-item">
                <label class="bk-label" style="width:150px;">计划详情</label>
                <div class="bk-form-content" style="margin-left:150px;">
                    <textarea name="plan_details" id="plan_details" class="bk-form-textarea" placeholder=""></textarea>
                </div>
            </div>
        

        <div class="bk-form-item bk-form-action">
            <div class="bk-form-content" style="margin-left:150px;">
                <a class="bk-button bk-primary" id="submit"  title="保存">
                    <span>保存</span>
                </a>
                <a class="bk-button" title="取消">
                    <span>取消</span>
                </a>
            </div>
        </div>

</body>

<!--JS-->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/daterangepicker-2.0.5/moment.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/daterangepicker-2.0.5/daterangepicker.js"></script>
    <script type="text/javascript">
    $('#plan_start').daterangepicker({
        locale : {
            format : 'YYYY-MM-DD HH:mm:ss'
        },
        autoApply: true,//选择日期后自动设置值
        singleDatePicker : true,//单选选择一个日期
        timePicker: true,//支持时间选择
        timePicker24Hour: true,//开启24小时时间制
        timePickerIncrement : 5, //分钟间隔
        timePickerSeconds: true //开启分钟选择
        
    });
    $('#plan_end').daterangepicker({
        locale : {
            format : 'YYYY-MM-DD HH:mm:ss'
        },
        autoApply: true,//选择日期后自动设置值
        singleDatePicker : true,//单选选择一个日期
        timePicker: true,//支持时间选择
        timePicker24Hour: true,//开启24小时时间制
        timePickerIncrement : 5, //分钟间隔
        timePickerSeconds: true //开启分钟选择
        
    });
    //validate_form_js_start
    $('#validate_form').validate({
            ignore: '.ignore',
            errorElement: 'div', //错误信息的容器
            errorClass: 'bk-error',
            errorPlacement: function(error, element) {
                error.addClass('bk-form-tip').insertAfter(element.parent())
            },
            success: function(label) {
                label.html('<div class="bk-badge bk-success"><i class="bk-icon icon-check-1"></i></div>');
            },
            validClass: "bk-valid",
            //验证规则
            rules: {
                plan_name: {
                    required: true,
                },
                plan_grade: {
                    required: true,
                },
                plan_type: {
                    required: true,
                },
                plan_details: {
                    required: true,
                }
                
            },
            //错误提示信息
            messages: {
                plan_name: "<p class='bk-tip-text'>计划名称为必填项！</p>  ",
                plan_grade: "<p class='bk-tip-text'>请选择计划星级！</p>  ",
                plan_type: "<p class='bk-tip-text'>计划类型为必填项！</p>  "
            }
    });

    $('#submit').click(function(event) {
        if ($('#validate_form').valid()) {
            $('#submit').addClass('is-loading');
        }
    });
    function savePlan() {
        let plan_start = $('#plan_start').val() 
        let plan_end = $('#plan_end').val() 
        if (!editor.getContent()) {
            new bkMessage({
                message: "请输入详细信息",
                theme: 'error',
                 delay: 3000
            });
            return false
        }
        if (!$('#plan_type').val()) {
            new bkMessage({
                message: "请选择计划星级",
                theme: 'error',
                delay: 3000
            });
            return false
        }
        if (plan_start >= plan_end) {
            new bkMessage({
                message: "结束日期不能小于起始日期",
                theme: 'error',
                delay: 3000
            });
            return false
        }
            
        /*if ($('#validate_form').valid()) {
            $.ajax({
                url: '{{ SITE_URL }}save_plan_info/',
                method: 'post',
                data: {
                    'plan_name': $("#plan_name").val(),
                    'requirement': editor.getContent(),
                    'plan_grade': $('#plan_grade').val(),
                    'plan_type' : $('#plan_type').val(),
                    'plan_details': $('#plan_details').val()
                    'plan_start': plan_start,
                    'plan_end': plan_end,
                    'plan_id': $('#plan_id').val(),
                    'csrfmiddlewaretoken': "{{ csrf_token }}"
                },
                success: function (response) {
                    if (response['result']) {
                        new bkMessage({
                            message: response['message'],
                            theme: 'success'
                        })
                        $('#myModal').modal('hide')
                        planTable.ajax.reload(null, false)
                    } else {
                        // 失败处理
                        new bkMessage({
                            message: response['message'],
                            theme: 'error',
                            delay: 3000
                        });
                        $('#myModal').modal('hide')
                        planTable.ajax.reload(null, false)
                    }
                }
            })
        }*/
    } 
//validate_form_js_end
    </script>

</html>